<template>
  <view class="bottom-view safe-bottom">
    <view class="bottom-view-container safe-bottom">
      <view class="page-container">
        <view class="content flex flex-middle flex-between">
          <view class="price">
            本单价格
            <view>
              <block v-if="bottomLoad">
                <u-loading-icon />
              </block>
              <block v-else>
                {{ `￥ ${priceInfo.price || 0}` }}
              </block>
            </view>
          </view>

          <view class="btn-view flex flex-middle">
            <view
              class="right flex flex-middle flex-center"
              @click="createOrder"
            >
              立即下单
              <text>
                <block v-if="bottomLoad">
                  <u-loading-icon />
                </block>
                <block v-else>
                  {{ `￥${priceInfo.price || 0}` }}
                </block>
              </text>
            </view>
            <!-- <view
              class="right flex flex-middle flex-center"
              @click="createOrder"
            >
              原价购
              <text>￥298</text>
            </view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    groupIndex: {
      type: Number,
      default: 0,
    },
    priceInfo: {
      type: Object,
      default: {},
    },
    bottomLoad: {
      type: Boolean,
      default: false,
    },
    createOrder: {
      type: Function,
      default: () => {},
    },
  },
};
</script>

<style scoped lang="scss">
.bottom-view {
  height: 70px;

  .btn-view {
    .left {
      background: #232323;
      border-color: #232323 !important;
      color: #fff;
    }

    .right {
      border-color: #31bc4e;
      color: #31bc4e;
      margin-left: 10px;
    }

    .left,
    .right {
      width: 126px;
      height: 40px;
      border-radius: 40px;
      border: 1px solid;

      text {
        margin-left: 2px;
      }
    }
  }

  .price {
    color: #9d9d9d;
    font-size: 12px;

    view {
      color: #ed6041;
      font-size: 18px;
    }
  }

  .content {
    height: 70px;
    padding: 0 16px;
  }

  &-container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    background: #fff;
    box-shadow: 0px 0px 8px 0px rgba(218, 218, 218, 0.5);
  }
}
</style>